<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<!-- <socialized-tabbar :showicon="true" title="意向购买"></socialized-tabbar> -->
		<view class="new-top-nav">
			<uni-nav-bar title="意向购买" backgroundColor="#fff" color="#000" statusBar="true"
				@clickLeft="back()" left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="contain-view" :style="{height:setcollapseheight() + 'px'}">
			<image v-if="product.imgList && product.imgList.length" class="img" :src="product.imgList && product.imgList[0] && product.imgList[0].productImgUrl" mode="scaleToFill"></image>
			
			<view class="title">
				{{ product && product.productTitle }}
			</view>
			
			<view class="content">
				<!-- 姓名 -->
				<view class="add-view-item">
					<image class="add-view-item-img" src="@/static/socialized-service/financial-insurance/user.png" mode="heightFix"></image>
					<view class="add-view-item-value">
						<view class="label">姓名：</view>
						<input type="text" class="content hasvalueinput" placeholder-class="nohasvalueinput"
							v-model="personmes.productUserName" />
					</view>
				</view>
				<!-- 联系方式 -->
				<view class="add-view-item">
					<image class="add-view-item-img" src="@/static/socialized-service/financial-insurance/phone.png" mode="heightFix"></image>
					<view class="add-view-item-value">
						<view class="label">联系方式：</view>
						<input type="text" class="content hasvalueinput" placeholder-class="nohasvalueinput"
							v-model="personmes.productUserPhone" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit">
			<button @click="submitFn" class="submit-btn">
				<image style="width: 30rpx;" class="icon-submit" src="@/static/wisdom-fishery/common/commit.png"
					mode="widthFix"></image>
				<text>提交</text>
			</button>
		</view>
	</view>
</template>

<script>
	import productApi from '@/api/socialized-servce/financial-insurance/product/index.js'
	// import loginApi from '@/api/socialized-servce/login/index.js'
	export default {
		data() {
			return {
				product: {},
				personmes: {
					productUserName: '',
					productUserPhone: ''
				},
				prodType:null
			}
		},
		onLoad(e) {
			this.productId = e.id
			this.queryById()
		},
		onPullDownRefresh() {
			this.param = { page: 1, size: 5, total: 0 }
			this.loadDataList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onShow() {
			
		},
		methods: {
			queryById(id) {
				productApi.queryById({ id: this.productId }).then(res => {
					this.product = res.data
					this.prodType = res.data.financialAndInsuranceFlag
					console.log(this.product);
				})
				// loginApi.getLoginUser().then(res => {
				// 	this.personmes = res.data
				// })
			},
			// toBuy() {
			// 	loginApi.edit(this.personmes).then(res => {
			// 		this.submitFn()
			// 	})
			// },
			submitFn() {
				const reg_phone = /^1[3-9]\d{9}$/
				if (!this.personmes.productUserName || !this.personmes.productUserPhone) {
					uni.showToast({
						title: '请填写姓名和联系方式',
						icon: 'none'
					});
					return
				}else if(!reg_phone.test(this.personmes.productUserPhone)){
					uni.showToast({
						title: '请填写正确联系方式',
						icon: 'none'
					});
				}else{
					productApi.addUser({
					...this.personmes,
					userId: this.personmes.userId,
					productId: this.productId,
					prodType:this.prodType
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({ title: res.msg })
						setTimeout(function() {
							uni.navigateBack({ delta: 1 })
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
				}
				

			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(170)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
				  success: function(res) {
					winHeight = res.windowHeight
				  }
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;
		overflow: auto;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}
		
		.contain-view {
			margin: 0 30rpx;
			position: relative;
			border-radius: 16rpx;
			box-sizing: border-box;
			
			.img {
				width: 100%;
				margin-bottom: 20rpx;
			}
			
			.title {
				font-size: 20px;
				font-weight: bold;
				text-align: center;
				margin-bottom: 30rpx;
			}
			&>.content {
				margin-top: 20rpx;
				.add-view-item {
					width: calc(100% - 40rpx);
					height: 60rpx;
					margin-top: 30rpx;
					padding: 20rpx;
					color: #959595;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
					background-color: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
					border-radius: 20rpx;
					font-size: 28rpx;

					&:first-child {
						margin-top: 0;
					}

					.add-view-item-img {
						width: 50rpx;
						height: 50rpx;
						// border-radius: 50%;
					}

					.add-view-item-value {
						width: calc(100% - 50rpx);
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						overflow: hidden;
						text-overflow: ellipsis;

						.hasvalueinput {
							height: 60rpx;
							line-height: 60rpx;
							font-size: 28rpx;
							color: #000000;
						}

						.nohasvalueinput {
							height: 60rpx;
							line-height: 60rpx;
							font-size: 28rpx;
							color: #959595;
						}
					}
					.label {
						display: inline-block;
						width: 140rpx;
						vertical-align: top;
						margin-left: 20rpx;
						color: #000;
					}
					
					.content {
						display: inline-block;
						width: calc(100% - 160rpx);
						height: 100%;
					}
				}
			}
		}
		
		
		.submit {
			position: absolute;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
		
			.submit-btn {
				width: 268rpx;
				height: 64rpx;
				background: linear-gradient(27deg, #2F99FF 0%, #62B1FF 100%);
				box-shadow: 0rpx 0rpx 10rpx 2rpx #0082FF;
				border-radius: 40rpx;
				letter-spacing: 1rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
		
				.icon-submit {
					margin-right: 10rpx;
				}
			}
		}
	}
	
</style>
